<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="登录"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-field v-model="loginname" placeholder="手机号/账号/邮箱" />
      <van-field v-model="password"  placeholder="请输入密码" />
      <van-button round :disabled="flag" @click="login" block type="danger">登录</van-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Toast } from 'vant'
import { doLogin } from './../../api/user'
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  computed: {
    flag () {
      return this.loginname === '' || this.password === ''
    }
  },
  data () {
    return {
      loginname: '',
      password: ''
    }
  },
  methods: {
    async login () {
      const res = await doLogin({
        loginname: this.loginname,
        password: this.password
      })
      if (res.data.code === '10010') {
        Dialog.confirm({
          message: '您还未注册，是否去注册',
          confirmButtonText: '注册',
          cancelButtonText: '取消'
        })
          .then(() => {
            // on confirm
            this.$router.push('/register/step1')
          })
          .catch(() => {
            // on cancel
          })
      } else if (res.data.code === '10011') {
        Toast('密码错误')
      } else {
        Toast('登录成功')
        localStorage.setItem('userid', res.data.data.userid)
        localStorage.setItem('token', res.data.data.token)
        localStorage.setItem('isLogin', true)
        /**
         * 本地保存了 userid token isLogin
         * userid 表示是哪一个用户
         * token 表示当前用户在服务器上是不是登录状态，如果是，返回想要的数据，
         *      如果不是，给前端返回某一个状态，前端接收到这个数据之后，跳转到登录页面
         * isLogin 纯前端校验，如果为真，继续校验token， 如果为假，直接跳转到登录
         */
        // console.log(res.data)
        // 返回上一页
        this.$router.back()
      }
    }
  }
}
</script>
